<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <div th:replace="header :: header" ></div>
</head>
<body>
<div class="ui container">
    <div th:replace="menu :: menu"></div>

    <div class="ui grid">
        <div class="four wide column"></div>
        <div class="eight wide column">

            <div class="ui white floating message">
                <h1 class="ui center aligned header">登录</h1>
                <div class="ui divider"></div>
                <form class="ui form signin">
                    <div class="field">
                        <label>用户名</label>
                        <input type="text" name="username"/>
                    </div>
                    <div class="field">
                        <label>密码</label>
                        <input type="password" name="password"/>
                    </div>
                    <input type="hidden" th:if="${_csrf}" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                    <div class="ui primary submit button">登录</div>
                    <div class="ui error message"></div>
                </form>
                <script>
                    $(document).ready(function() {
                        $('.ui.form.signin').form({
                            fields: {
                                username: {
                                    identifier: 'username',
                                    rules: [
                                        {
                                            type: 'empty',
                                            prompt: '请输入用户名！'
                                        }
                                    ]
                                },
                                password: {
                                    identifier: 'password',
                                    rules: [
                                        {
                                            type: 'empty',
                                            prompt: '请输入密码！'
                                        },
                                        {
                                            type: 'minLength[6]',
                                            prompt: '密码至少为6位！'
                                        }
                                    ]
                                }
                            },
                            onSuccess: function () {
                                var formData = {
                                    username: getFieldValue('username'),
                                    password: getFieldValue('password')
                                };

                                $.ajax({
                                    headers:{'X-CSRF-TOKEN':$("input[name=_csrf]").val()},
                                    type: 'POST',
                                    url: '/signin',
                                    contentType: "application/json",
                                    data: JSON.stringify(formData),
                                    success: onFormSubmitted,
                                    error: errormsg
                                });
                            }
                        }).submit( function( e ) {
                            e.preventDefault();
                        });
                        function getFieldValue(fieldId) {
                            // 'get field' is part of Semantics form behavior API
                            return $('.ui.form.signin').form('get field', fieldId).val();
                        }
                        function errormsg(err) {
                            $('.ui.form.signin').form('add errors',['非法操作']);
                        }
                        // Handle post response
                        function onFormSubmitted(response) {
                            if(response=="ok"){
                                window.location.href="/";
                            }else{
                                $('.ui.form.signin').form('add errors',[response]);
                            }
                        }
                    });

                </script>
            </div>
            <div class="ui white floating message">
                <p>还没有账号？<a href="/signup">注册</a></p>

            </div>
        </div>
        <div class="four wide column">



        </div>
    </div>


    <div th:replace="footer :: footer"></div>
</div>
</body>
</html>